{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/member/set.css">
<link rel="stylesheet" href="/public/plugins/webuploader/webuploader.css">
<style>
    /*.webuploader-pick {*/
        /*position: relative;*/
        /*display: inline-block;*/
        /*cursor: pointer;*/
        /*background: #eee;*/
        /*padding: 10px 15px;*/
        /*color: #fff;*/
        /*text-align: center;*/
        /*border-radius: 3px;*/
        /*overflow: hidden;*/
    /*}*/
    .am-header-default{
        background-color: #fff;
    }
</style>
{/block}
{block name="head"}
<header data-am-widget="header"
        class="am-header am-header-default">
    <div class="am-header-left am-header-nav" onclick="history.back(-1)">
        <span class="icon iconfont icon-xiangzuojiantou" style="color: #989898;"></span>
    </div>

    <h1 class="am-header-title" style="color:#424242;">
        个人资料
    </h1>


</header>
<hr style="border:1px solid #e0e0e0;margin: 0px;">
{/block}
{block name="body"}
<ul class="am-list">
    <li style="height: 78px;line-height: 78px;">
        <div class="am-g" style="padding-left:50px;">
            <div class="am-u-sm-8" style="height: 53px;line-height: 53px;">
                头像
            </div>
            <div class="am-u-sm-4" style="height: 53px;line-height: 53px;">
 <!--<a id="head"><img class="am-img-responsive" src="{$userInfo.headimgurl}" alt=""-->
                   <!--style="width: 40px;height: 40px;text-align: center;"></a>-->
                <img class="am-img-responsive" src="{$userInfo.headimgurl}" alt=""
                style="width: 15vw;height:15vw;text-align: center;">
         </div>
     </div>
 </li>
 <li style="height: 78px;line-height: 78px;">
     <div class="am-g" style="padding-left:50px;">
         <div class="am-u-sm-8" onclick="getName()" style="height: 53px;line-height: 53px;">
             昵称
         </div>
         <div class="am-u-sm-4" style="height: 53px;line-height: 53px;">
             <a onclick="getName()" id="name">{$userInfo.alias|default='未设置'}</a><span class="icon iconfont icon-xiangyoujiantou"></span>
         </div>
     </div>
 </li>
 <li style="height:78px;line-height:78px;border: 1px solid #e0e0e0; ">
     <div class="am-g" style="padding-left:50px;">
         <div class="am-u-sm-8" onclick="getSex()" style="height: 53px;line-height: 53px;">
             性别
         </div>
         <div class="am-u-sm-4" onclick="getSex()" style="height: 53px;line-height: 53px;">
             <span id="sex">
             {switch name="userInfo.sex" }
             {case value="1" }男{/case}
             {case value="2" }女{/case}
                 {default /}保密
             {/switch}
             </span>
             <span class="icon iconfont icon-xiangyoujiantou"></span>
         </div>
     </div>
 </li>

</ul>

{/block}
{block name="script"}
<script src="/public/plugins/webuploader/webuploader.min.js"></script>
<script src="/public/common.js"></script>
<script>
 uploadOnePic('head', 'member', function (data) {
     if (data.state === 'SUCCESS') {
         setInfo({headimgurl: data.url}, function (datas) {
             if (datas.code) {
                 $('#head').find('img').attr('src', data.url);
             } else {
                 layer.open({
                     content: datas.msg
                     , skin: 'msg'
                     , time: 2 //2秒后自动关闭
                 });
             }
         });
     }
 });

 function setInfo(data, callback) {
     $.post('{:url("/home/User/editInfo")}', data, function (datas) {
         callback(datas)
     })
 }

 function getName() {
     //询问框
     layer.open({
         content: '<div class="am-form-group">\n' +
         '    <div class="am-g" style="">\n' +
         '    <div class="am-u-sm-12">\n' +
         '    <label for="doc-ipt-3" class="am-form-label" style="">新昵称</label>\n' +
         '    </div>\n' +
         '    <div class="am-u-sm-12" >\n' +
         '      <input type="text" id="name-edit" placeholder="输入你的新昵称" style="width: 100%">\n' +
         '    </div>\n' +
         '  </div>\n' +
         '  </div>'
         , btn: ['确定', '取消']
         , yes: function (index) {
             var text=$('#name-edit').val();
             setInfo({alias:text},function (datas) {
                 if (datas.code) {
                     $('#name').text(text);
                 } else {
                     layer.open({
                         content: datas.msg
                         , skin: 'msg'
                         , time: 2 //2秒后自动关闭
                     });
                 }
             });
             layer.close(index);
         }
     });
 }
 function getSex() {
     //询问框
     layer.open({
         content: '<div class="am-form-group">\n' +
         '      <label for="doc-select-1">性别</label>\n' +
         '      <select id="get-sex">\n' +
         '        <option value="0">保密</option>\n' +
         '        <option value="1">男</option>\n' +
         '        <option value="2">女</option>\n' +
         '      </select>\n' +
         '      <span class="am-form-caret"></span>\n' +
         '    </div>'
         , btn: ['确定', '取消']
         , yes: function (index) {
             var text=$('#get-sex').val();
             setInfo({sex:text},function (datas) {
                 if (datas.code) {
                     if (text==="0"){
                         $('#sex').text('保密')
                     }
                     if (text==="1"){
                         $('#sex').text('男')
                     }
                     if (text==="2"){
                         $('#sex').text('女')
                     }
                 } else {
                     layer.open({
                         content: datas.msg
                         , skin: 'msg'
                         , time: 2 //2秒后自动关闭
                     });
                 }
             });
             layer.close(index);
         }
     });
 }

</script>
{/block}
